昨天對於網頁前端框架有初步的認識，今天的內容將介紹建置Vue.js開發環境的兩種方法哦～首先我們要來安裝非常實用的程式編輯器VS Code以及擴充套件
官方下載網址 https://code.visualstudio.com/Download
VS Code安裝完成後，在畫面最左手邊的 
(Extensions)下載
1. Live Server
提供預覽網頁的功能，也就是將所打的程式碼即時呈現在瀏覽器上。
2. Vue (official)
提供Vue.js 語言可識別的檔案類型，並且具有語法突出顯示、括號匹配和懸停描述等語言功能。
從 CDN 引入 Vue 不需要額外的建置流程，只要在 HTML 檔案的 <head>標籤內加入以下語法，就能開始撰寫 Vue 程式碼，這種方式適合快速入門、撰寫基礎範例，但無法使用單一檔案元件 (SFC) 語法，也不適合應用在大型專案。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
透過安裝 Node.js 與 npm，我們可以使用 Vite 建立一個基於 Vue 的單頁應用程式，並支援 Vue 的單一檔案元件 (SFC) 語法，這樣的開發方式不僅適合大型專案與團隊合作，也更能完整地體驗 Vue 的功能與優勢。以下是安裝的步驟流程：
安裝Node.js
官方下載網址 https://nodejs.org/zh-tw/download
打開cmd 輸入node -v 和 npm -v 查看版本(檢查是否有安裝成功)
將路徑切換到桌面
輸入npm init vue@latest表示建立一個新的Vue專案，接著輸入y表示繼續後面的程序，輸入自訂的專案名稱，之後根據需求選擇項目，最後桌面會出現新建的檔案夾
依序輸入上圖的綠色字指令(cd自訂的專案名稱、npm install、npm run dev)，之後就會跳出以下畫面
按下ctrl鍵點選上圖中的Local網址，就會出現成功創建的畫面
在VS Code開啟剛才新建的檔案夾，就會看到vue的專案結構了哦
參考資源
https://vuejs.org/guide/quick-start.html
https://www.w3schools.com/vue/vue_intro.php
https://code.visualstudio.com/docs/nodejs/vuejs-tutorial
https://www.youtube.com/watch?v=I_xLMmNeLDY
iThome鐵人賽
看影片追技術